Issue An animated GIF displays correctly both in
the Preview tab and in Export Preview in
Fireworks. After exporting the Fireworks file as
an animated GIF with transparency, the final image
appears cropped when inserted into a web page in
Dreamweaver on the Macintosh.
Reason By default, Fireworks enables two
settingsAuto Crop and Auto Differenceto reduce
the file size of animated GIFs exported from the
application. Most current browsers handle Auto
Crop and Auto Difference settings in animated GIFs
without difficulty, but occasionally the changes
between frames can cause the browser to display
the animated GIF incorrectly.
The Auto Crop option crops each frame as a
rectangular area, so that only the image area that
differs between frames is output. This option
looks at the parts of the image that change, and
crops out anything that is not changing while
animating the changing area. Selecting this option
from the Frames panel's Options pop-up menu or
from the Animation tab of the Export Preview
window reduces the size of the exported
file.
.iso/tutorial/macromed/files/firewks/anigif_files/transparency_01.gif) |
.iso/tutorial/macromed/files/firewks/anigif_files/transparency_02.gif) |
The Options pop-up menu from the Frames
panel |
The Animation tab of the Export Preview
window |
In the case of animated GIF transparency,
Dreamweaver is actually "seeing" the crop and
interpreting that it is the actual image size.
Solution Generally, disabling the Auto Crop option
corrects odd behaviors that animated GIFs
exhibit.
To turn off the Auto Crop option, follow
these steps:
1 |
If the animated GIF is optimized under a
slice, select the slice over the animation on
the canvas. If the entire canvas is to be
animated, you don't need to select anything.
|
2 |
Choose Window > Frames to open the
Frames panel or choose File > Export Preview
to open the Export Preview window.
|
3 |
In the Frames panel, click the Options
pop-up button at the top right of the panel
group. In the Export Preview window, click the
Animation tab. |
4 |
Deselect the Auto Crop option from the
Options pop-up menu or at the lower left of the
Animation tab in the Export
Preview. |
Additional
information To learn how to use Fireworks files with
Dreamweaver, refer to Placing
Fireworks files in Dreamweaver: an overview
(TechNote 15245).
For more details about transparency and
animated GIF issues, please refer to Fireworks
transparency issues (TechNote
14647)
To get detailed instructions on how to
export and preview Fireworks animations, visit the
following TechNotes:
|